<style>

    #form
    {
        position: fixed;
        left: 20%;
        top: 20%;
    }

    #solo
    {
        position: relative;
        left: 20%;
        top: 3%;
    }

</style>
<form action="<?php echo $this->config->item('baseUrl') ?>Find_Room/get_data" id="form" method="post">

    <h3>Location</h3>

    <div id="solo">
        <label for="location">Location:</label>
        <select id="location_id" name="location_id">
            <option value="Any">Any</option>
            <option value="Atena">Atena</option>
            <option value="Roma">Roma</option>
            <option value="Venetia">Venetia</option>
        </select>
    </div>

    <h3>Room</h3>

    <div id="solo">
        <label for="floor">Floor:</label>
        <select id="floor_id" name =floor_id>
            <option value="Any">Any</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
    </div>

    <div id="solo">
        <label for="room_id">Rooms:</label>
        <select id="room_id" name="room_id" onchange="toogle_range(this)">
            <option value="Any">Any</option>
            <option value="Fixed">Fixed</option>
            <option value="Range">Range</option>
        </select>

        <input id="room_count_one" type="range" name="room_count_one" min="1" max="5" value="2" style="display: none"/>
        <input id="room_count_two" type="range" name="room_count_two" min="1" max="5" value="2" style="display: none"/>
    </div>

    <div id="solo">
        <label for="geographic">Geographic Orientation:</label>
        <select id="geographic_id" name="geographic_id">
            <option value="Any">Any</option>
            <option value="north">North</option>
            <option value="east">East</option>
            <option value="south">South</option>
            <option value="west">West</option>
            <option value="north-east">North - East</option>
            <option value="north-west">North - West</option>
            <option value="south-east">South - East</option>
            <option value="south-west">South - West</option>
        </select>
    </div>

    <h3>Facilities</h3>

    <div id="solo">

        <label for="air_cond">Air Conditioning</label>
        <input id="air_cond" type="checkbox" name="air_cond" value="1"/>

    </div>

    <div id="solo">

        <label for="tv_setup">TV:</label>
        <select id="tv_setup_list" name="tv_setup_list">
            <option value="Any">Any</option>
            <option value="Classic">Classic</option>
            <option value="LED">LED</option>
            <option value="3D">3D</option>
        </select>

    </div>

    <h3>Premium Facilities</h3>

    <div id="solo">

        <label for="minibar">Minibar:</label>
        <select id="minibar_setup" name="minibar_setup">
            <option value="Any">Any</option>
            <option value="Without">Without</option>
            <option value="Minimal">Minimal</option>
            <option value="All Inclusive">All Inclusive</option>
        </select>

    </div>

    <div id="solo">

        <label for="date_pick">Select a time interval:</label>
        <input type="date" id="date_pick_from" name="start_date" value="<?php echo date('Y-m-d')?>" onchange="check_dates()">
        <input type="date" id="date_pick_to" name="end_date" value="<?php echo date('Y-m-d')?>" onchange="check_dates()">

    </div>

    <button type="submit">Search</button>

</form>

<script>

    function toogle_range(obj)
    {
        switch($(obj).val())
        {
            case "Fixed":
                    $("#room_count_one").show();
                    $("#room_count_two").hide();
                break;
            case "Range":
                $("#room_count_one").show();
                $("#room_count_two").show();
                break;
            case "Any":
                $("#room_count_one").hide();
                $("#room_count_two").hide()
                break;
        }
    }

    function check_dates()
    {
        var f = new Date($("#date_pick_from").val());
        var s = new Date($("#date_pick_to").val());

        if(f.getTime() > s.getTime())
        {
            $("#date_pick_from").val($("#date_pick_to").val());
        }
    }

</script>

</body>
</html>